<template>
  <div>
    <navTop :headTitle="headTitle"></navTop>
    <section class="scroll_container">
      <section class="list_container">
        <ul class="deliverable_address">
          <li v-for="item in addrList" :key="item.id">
            <span class="choose_icon"><i class="iconfont icon-xuanze" :class="{choosed:item.hash.ismain==1}" @click="changeIsmain(item.hash.id)"></i></span>
            <span>
              <p class="choose_content" @click="reviseAdr(item)">
                <span>{{item.hash.name}}</span>
                <span>{{item.hash.phone}}</span>
              </p>
              <p class="choose_place">
                <span>{{item.hash.mapaddress}}&nbsp;{{item.hash.address}}</span>
              </p>
            </span>
            <span class="delete_adr" @click="deleteAdr(item)">
              <input type="button" value="删除" class="remove_button">
            </span>
          </li>
        </ul>
      </section>
    </section>
    <nuxt-link :to="{name:'addAddress'}" class="add_address" tag="p">新增收货地址</nuxt-link>
  </div>
</template>
<script>
import navTop from '~/components/common/navTop.vue';

export default {
  data() {
    return {
      headTitle: '收货地址',
      ts: this.newStore(),
      addrList: [],
    };
  },
  created() {
    this.getLocation();
  },
  methods: {
    reviseAdr(item) {
      this.$router.push({
        name: 'addAddress',
        query: {
          id: item.hash.id,
        },
      });
    },
    deleteAdr(item) {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A65CE20A440A62C4EBE6DC31454F2C90B1269D563A69A06496C',
        addressid: item.hash.id,
      };
      this.$messagebox.confirm('确定执行此操作?').then((action) => {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          console.log(ts.d);
          this.getLocation();
        });
      });
    },
    getLocation() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A6559B7AE69B5ABEA2D43BC8DFD3F92B0DEECF4ABF3B9302723',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.addrList = ts.d.data.operation1;
      });
    },
    changeIsmain(addressid) {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A657344F3456DD48374A76C3E4EA074337FECF4ABF3B9302723',
        addressid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.$toast({
          message: '成功设置默认地址',
          duration: 500,
        });
        this.getLocation();
        setTimeout(() => {
          this.$router.back(-1);
        }, 500);
      });
    },
  },
  components: {
    navTop,
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.scroll_container {
  background: #f1f1f1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 1rem;
}
.scroll_container p {
  margin-bottom: 0.2rem;
}
.deliverable_address {
  margin-bottom: 0;
  overflow: auto;
}

.deliverable_address li {
  background: #fff;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  padding: 0.2rem 0.2rem;
  border-bottom: 1px solid #f1f1f1;
  justify-content: space-between;
}
.deliverable_address span:nth-child(2) {
  flex-grow: 5;
}
.choose_icon {
  width: 0.5rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  margin-right: 0.2rem;
}
.choose_icon i {
  font-size: 0.35rem;
  display: block;
}
.icon-xuanze {
  color: #aaa;
}
.choosed {
  color: #daca42;
}
.choose_content span:first-child {
  font-weight: 600;
  font-family: "Microsoft Yahei";
}
.choose_content span:last-child {
  margin-left: 0.5rem;
  font-size: 0.3rem;
}
.choose_place span{
  font-size: 0.3rem;
  color: #666;
}
.out_delivery {
  background: #f1f1f1;
  font-family: "Microsoft Yahei";
  padding: 0.2rem;
  color: #666;
  font-size: 0.3rem;
}
.out_delivery_container span {
  color: #ccc;
}
.add_address {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.8rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 204;
  color:#428bca;
  border-top: 1px solid #f1f1f1;
  text-decoration: none;
  font-family: "Microsoft Yahei";
}
.remove_button {
  padding: 0.1rem 0.4rem;
  background-color: #428bca;
  border-color: #357ebd;
  color: #fff;
  border-radius: 0.1rem;
  border: 1px solid transparent;
  font-size: 0.2rem;
  z-index: 5;
}
</style>

